<template>
  <div>
    <h3>watch侦听器用法</h3>
    <input class="form-control" v-model.trim="info.username">
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'MyWatch',
  data(){
    return{
      username:'admin',
      info:{
        username:'admin',
        age:20
      }
    }
  },
  watch:{
    //  async username(newVal,oldVal){
    //  const {data:res}=await axios.get('http://www.liulongbin.top:3006/api/getbooks?'+newVal)
    //  console.log(res)
    // }
    // username:{
    //   async handler(newVal,oldVal){
    //    const {data:res}= await axios.get('http://www.liulongbin.top:3006/api/getbooks?'+newVal)
    //    console.log(res);
    //   },
    //   // 立即触发watch侦听器
    //   immediate:true,
    // }
    // info:{
    //   async handler(newVal){
    //    const {data:res}=await axios.get('http://www.liulongbin.top:3006/api/getbooks?'+newVal.username)
    //    console.log(res);
    //   },
    //   // 监听对象所有属性的变化
    //   deep:true
    // }
    'info.username':{
      async handler(newVal){
        const {data:res}=await axios.get('http://www.liulongbin.top:3006/api/getbooks?'+newVal)
        console.log(res)
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>